<template>
  <div>
    <h2>当前求和：{{ sum }}</h2>
    <button @click="sum++">点我+1</button>
    <h2>{{ msg }}</h2>
    <button @click="msg += '!'">修改信息</button>
    <br>

    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <button @click="person.name += '~'">修改姓名</button>
    <button @click="person.age++">增长年龄</button>
  </div>
</template>

<script>
import { reactive, ref, watchEffect } from "vue";

export default {
  name: 'test_watch',
  // vue2中的监听简单写法
  // watch: {
  //   sum(newValue, oldValue) {
  //     console.log('sum的值变化了...', newValue, oldValue);
  //   }
  // },
  setup() {
    let sum = ref(0)
    let msg = ref('你好啊')
    let person = reactive({
      name: '张三',
      age: 18
    })

    // vue3中的监听写法，
    // 第一个参数可以写成数组，监听多个属性，第二个参数是新的值的旧的值
    // watch([sum, msg], (newValue, oldValue) => {
    //   console.log('sum的值变化了...', newValue, oldValue);
    // }, { immediate: true }) // 最后的参数可选的，也可以不写
    // immediate表示页面初始就执行一次


    // 如果监视person对象这个reactive响应式数据，监视不到，并且目前无法解决
    // 如果要监视person里面的某一个属性，可以替换person写为：()=>person.name   监视多个可以放到数组里 []
    // watch(person, (newValue, oldValue) => {
    //   console.log('person的值变化了...', newValue, oldValue);
    // })

    // watchEffect
    watchEffect(() => {
      // 只要这个匿名函数内使用了对应的属性，watchEffect就会监视对应的属性
      // 如果没有使用哪些属性，这哪些属性就不会被监视
      const x = sum.value
      console.log('watchEffect执行了。。。', x);
    })



    return {
      sum,
      msg,
      person
    }
  }
}
</script>

